<template>
<div class="">
  <el-input style="width:43%;margin-left: 21%"
            type="text" placeholder="请输入单词"
            v-model="word" ></el-input>
  <el-button @click="findWord" style="margin-left: 2%;">🔍 搜索</el-button>

  <el-empty description=" " style="margin-left:-10%" v-show="!isShow" v-loading="isLoading"></el-empty>
  <el-card class="box-card"  shadow="hover" v-show="isShow">
    <div slot="header" class="clearfix" style="text-align: center">
      <span> {{info.query}}</span>
      <el-tooltip  effect="light" content="发音" placement="top-start">
        <el-button class="smallBtn" size="mini" @click="$refs.audio1.play()"><i>📣</i></el-button>
      </el-tooltip>
      <audio ref="audio1"  v-show="false" :src="info.speakUrl"></audio>
    </div>
    <div class="text item">
      <span v-for="(item,index) in info.translation" :key="index">翻译:   {{ item }}</span>
      <el-tooltip  effect="light" content="发音" placement="top-start">
        <el-button class="smallBtn" size="mini" @click="$refs.audio2.play()"><i>📣</i></el-button>
      </el-tooltip>
      <el-tooltip  effect="light" content="收藏" placement="top-start">
        <el-button class="smallBtn" size="mini" @click="addCollection"><i>💬</i></el-button>
      </el-tooltip>
      <audio ref="audio2"  hidden :src="info.tSpeakUrl"></audio>
        <hr>
        <span v-for="(item,index) in info.basic.explains" :key="'info2-'+index">
          {{item}}<br>
      </span>
    </div>
  </el-card>
</div>
</template>
<script>
import {findWord} from "../../api/learn";
import {mapGetters} from "vuex";
import {addCollection, getCollections} from "../../api/user";

export default {
  name: "LearnWord",
   data(){
      return{
        isShow:false,
        isLoading:false,
        word:'',
        info:{basic:{explains:''}}
      }
   },
  computed:{
    ...mapGetters(['user'])
  },
  methods:{
    findWord(){
      this.isLoading=true;
      var pattern = new RegExp("[\u4E00-\u9FA5]+");
      var pattern2 = new RegExp("[A-Za-z]+");
      let data={};
      if(pattern.test(this.word)){
        data={from:"zh-CHS",to:"en",q:this.word}
      }
      if(pattern2.test(this.word)){
        data={from:"en",to:"zh-CHS",q:this.word}
      }
      findWord(data).then((res)=>{
        if(res.data.errorCode==="0" && res.data.isWord===true){
          console.log(res.data)
          this.isShow=true;
          this.info=res.data
          this.isLoading=false
          this.$message.success(res.message)
        }
        else {
          this.$message("查阅失败，请输入正确的单词")
        }

      }).catch((err)=>{
      })
    },
    addCollection() {
      let data={id:this.info.requestId,
                userId:this.user.id,
                word:this.info.query,
                speakUrl:this.info.speakUrl,
                translation:this.info.translation[0],
                explains:this.info.basic.explains.toString()}
      addCollection(data).then((res)=>{
        this.$message.success(res.message)
        this.$bus.$emit('newCollect')
      }).catch((e)=>{
      })
    },
  }
}
</script>

<style scoped>
.box-card{
  background:#2d2e36;
  color: white;
  margin:2%;
  height: 100%;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}
.smallBtn{
  margin-left: 15px;
  background:#2d2e36;
  width:10px;
}
.smallBtn i{
  margin-left: -8px
}
</style>